<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello vue</title>
</head>
<body style="background-color: darkcyan">
<div id="app">
    <component1></component1>
    <!--组件复用-->
    <component1></component1>
    <component1></component1>

    <component2></component2>
</div>

<!--超出的Vue实例，vue无法管理就无法使用这个组件component1了-->
<div id="app1">
    <component1></component1>
</div>
</body>
<script src="../css/vue.js"></script>
<script>
    /**
     * 第一种：使用Vue.component创建一个组件
     * */
    Vue.component('component1', {
        template: `
    <div>
        <h2>我的第一个组件</h2>
        <h2>你们好</h2>
    </div>
    `
    });

    /**
     * 第二种：在Vue实例里注册
     * 先定义好对象，再实例的components属性上把组件定义好
     * @type {{template: string}}
     */
    const component2 = {
        template: `
    <div>
        <h2>我的第二个组件</h2>
    </div>
    `
    }

    //组件的使用必须在Vue实例的div里，超出的实例，vue无法管理就无法使用这个组件了
    const app = new Vue({
        el: '#app',
        components: {
            'component2': component2
        }
    })

</script>
</html>